<template>
    <div>
        <!--        <Card style="margin-left: 1%; margin-right: 1%; margin-top: 1%" dis-hover>-->
        <!--            <h2 style="color: dodgerblue">-->
        <!--                个人/创作中心-->
        <!--                <Divider type="vertical" />-->
        <!--                <a href="/" style="font-size: medium; color: black">主页</a>-->
        <!--            </h2>-->
        <!--        </Card>-->
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark">
                    <div v-if="isMO">
                        <span style="color: white">个人中心</span>
                        <span style="right: 0;position: absolute;" v-if="isMO">
                            <Button @click="doMenu" ghost>
                                <Icon type="ios-menu" color="white"/>
                            </Button>
                        </span>
                    </div>
                    <div v-if="!isMO">
                        <MenuItem name="0" to="/">
                            主页
                        </MenuItem>
                        <MenuItem name="9" to="/do/info">
                            个人中心
                        </MenuItem>
                        <Submenu name="1">
                            <template slot="title">
                                <Icon type="ios-paper"/>
                                内容管理
                            </template>
                            <MenuItem name="1-1" to="/do/post">
                                投稿
                            </MenuItem>
                            <MenuItem name="1-2" to="/do/article">
                                文章管理
                            </MenuItem>
                        </Submenu>
                        <MenuItem name="2" to="/do/comment">
                            评论管理
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Content>
                <Card v-if="show">
                    <center>
                        <router-link to="/" style="margin-top: 2px">
                            <strong style="font-size: medium; color: dodgerblue">主页</strong>
                        </router-link>
                        <br/>
                        <router-link to="/do/post" style="margin-top: 2px">
                            <strong style="font-size: medium; color: dodgerblue">投稿</strong>
                        </router-link>
                        <br/>
                        <router-link to="/do/article" style="margin-top: 2px">
                            <strong style="font-size: medium; color: dodgerblue">文章管理</strong>
                        </router-link>
                        <br/>
                        <router-link to="/do/comment" style="margin-top: 2px">
                            <strong style="font-size: medium; color: dodgerblue">评论管理</strong>
                        </router-link>
                    </center>
                </Card>
                <router-view></router-view>
            </Content>
            <Footer style="text-align: center; margin-top: 20%">
                纪中三鑫2018届26班29班 保留所有权利 <br/>
                由 26班 <a href="https://www.damanyang.cn" style="text-decoration: none" target="_blank">杨狄男</a> & <a
                    href="https://abalone.life" style="text-decoration: none" target="_blank">陈冠宇</a> 编写/设计
            </Footer>
        </Layout>
    </div>
</template>

<script>
    export default {
        name: "Do",
        data() {
            return {
                isMO: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
                show: false,
            }
        },
        methods: {
            doMenu() {
                if (this.show == true) {
                    this.show = false;
                } else {
                    this.show = true;
                }
            },
        }
    }
</script>

<style scoped>

</style>